<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
	<ul class="lists">
		<li>
			<div class="title">
				<i></i>
				<h3>切尔奇翁群撒多</h3>
			</div>
			<div class="content"></div>
		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>切尔奇翁</h3>
			</div>
			<div class="content"></div>

		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>啊实打实大</h3>
			</div>
			<div class="content"></div>

		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>期围棋翁</h3>
			</div>
			<div class="content"></div>

		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>阿撒大大</h3>
			</div>
			<div class="content"></div>

		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>驱蚊器哇所多</h3>
			</div>
			<div class="content"></div>

		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>阿撒大大</h3>
			</div>
			<div class="content"></div>

		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>大大大</h3>
			</div>
			<div class="content"></div>

		</li>
		<li>
			<div class="title">
				<i></i>
				<h3>阿达瓦所多</h3>
			</div>
			<div class="content"></div>

		</li>
	</ul>
</body>
<script>
	$(function(){
		let arr = [1,2,3,4,5,6,7];
		$('.lists>li').each((index,item)=>{
			let result = ""
			arr.forEach((items,indexs)=>{
				result+=`<input type="checkbox" value="${items}"/>${items}`
			})
			$(item).find('h3').attr('data-check','check');
			$(item).find('.content').html(result).addClass('hide');
		})

		$('.lists li').eq(0).find('.content').removeClass('hide');
		$('.lists li').eq(0).find('h3').attr('data-check','checked').prev().addClass('checked')

		$('.lists li h3').on('click',function(){
			if($(this).attr('data-check') == 'check'){  //check表示未选中
				$(this).attr('data-check','checked');  //改变状态
				$(this).prev().addClass('checked');  //给标题添加勾
				$(this).parents('li').find('.content').removeClass('hide')  //显示内容
			}
			else{  //checked表示选中
				$(this).attr('data-check','check');
				$(this).prev().removeClass('checked');
				$(this).parents('li').find('.content').addClass('hide');
			}

		})
	})
</script>
<style>
	*{
		padding: 0;
		margin: 0;
	}
	.lists li{
		margin-bottom: 20px;
	}
	.lists li .title{
		display: flex;
		margin-bottom: 10px;
	}
	.lists>li .title i{

		width: 20px;
		height: 20px;
		border: 1px solid #ccc;
	}
	.lists>li .title i.checked:after{
		content: '√';
	}
	.lists li .content.hide{
		height: 0;
		overflow: hidden;
	}
	.lists li .content{
		height: 25px;
		transition: all .5s;

	}
</style>
</html>